<template>
    <el-popover
            placement="bottom"
            width="666"
            trigger="click"
            v-model="visible"
            @show="onopen"
    >
        <div>
            <!--            src/views/gCode/filed/list.vue:26-->
            <FieldList ref="listDom"
                       @success="(selectRow)=>_success(selectRow)"
            ></FieldList>
            <div>
                <el-button @click="()=>visible=false" size="mini">取消</el-button>
                <el-button @click="()=>_success()" size="mini" type="primary">确定</el-button>
            </div>
        </div>
        <el-input v-model="valueText"
                  slot="reference"
                  placeholder="选择表格"
                  :style="$el&&$el.style&&$el.style.cssText||'width:120px;'"
                  @change="(value)=>changeText(value)"
        ></el-input>
    </el-popover>
</template>
<script>
  export default {
    data() {
      return {
        valueData: '',
        valueText: '',
        visible: false,
      };
    },
    props: {
      gTableId: {
        type: [String, Number],
      },
      text: { type: [String, Number] },
      value: { type: [String, Number] },
    },
    watch: {
      '$props.text': {
        handler(value) {
          this.valueText = value;
        },
        immediate: true,
      },
      '$props.value'(value) {
        this.valueData = value;
      },
    },
    components: {
      FieldList: () => import('@/views/gCode/filed/list.vue'),
    },
    methods: {
      onopen() {
        this.$refs['listDom'].initByDialog({
          gTableId: this.$props.gTableId,
          pageNum: 100,
        });
      },
      _success(selectRow) {
        this.$emit('change', selectRow);
        this.$emit('update:text', selectRow && selectRow.filedName);
        this.$emit('input', selectRow && selectRow.id);
        this.valueText = selectRow && selectRow.filedName;
        this.visible = false;
      },
      changeText(value) {
        this.valueText = value;
        this.$emit('update:text', value);
      },
    },
  };
</script>
